body {
    --s: 140px; /* control the size */
    --c1: #AB3E5B;
    --c2: #FFBE40;
  
    --_g: 
      #0000 25%, #0008 47%, var(--c1) 53% 147%, var(--c2) 153% 247%,
      var(--c1) 253% 347%, var(--c2) 353% 447%, var(--c1) 453% 547%, #0008 553%, #0000 575%;
    --_s: calc(25% / 3) calc(25% / 4) at 50%;
    
    height: 100%;
    margin: 0;
    background:
      radial-gradient(var(--_s) 100%, var(--_g)),
      radial-gradient(var(--_s) 100%, var(--_g)) calc(var(--s) / 2) calc(3 * var(--s) / 4),
      radial-gradient(var(--_s) 0, var(--_g)) calc(var(--s) / 2) 0,
      radial-gradient(var(--_s) 0, var(--_g)) 0 calc(3 * var(--s) / 4),
      repeating-linear-gradient(90deg, #ACCEC0 calc(25% / -6) calc(25% / 6), #61A6AB 0 calc(25% / 2));
    background-size: var(--s) calc(3 * var(--s) / 2);
    animation: m 2.5s infinite linear;
  }
  
  body, html {
    height: 100%;
    margin: 0;
  }
  
  @keyframes m {
    to {
      background-position:
        var(--s) 0,
        calc(var(--s) / -2) calc(3 * var(--s) / 4),
        calc(3 * var(--s) / 2) 0,
        calc(-1 * var(--s)) calc(3 * var(--s) / 4),
        0 0;
    }
  }
  

a{
    color: rgb(255, 255, 255);
    text-decoration: none;
}
ul {
    position: fixed;
    z-index: 1;
    top: 0;
    width: 100%;
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: black;
  }
  li {
    display: inline;
    float:inline-start;
  }

li a {
  display: block;
  padding: 8px;}
  
  p {
    background-color: white;
  }